<template>
  <div class="page-content">
        <!-- 只能用输入框的形式分类查询数据 -->
    <table-bar :showTop="false" :columns="columns" @changeColumn="changeColumn">
      <div slot="top">
        <el-form label-width="70rem">
          <el-row>
           <el-col :span="4">
             <el-input
              placeholder="输入屠宰批次查询"
              v-model="batchValue"
              size="small"
              @change="getDataByBatch"
            >
            </el-input>
           </el-col>
           <el-button type="primary" style="margin-left:1rem ">搜索</el-button>
          </el-row>
          </el-form>
      </div>
      <div slot="bottom">
    <el-button type="primary" plain size="small" @click="addEven"
            >新增入库</el-button>
    <el-button type="danger" plain @click="deleteBox">批量删除</el-button>
      </div>
    </table-bar>

      <!-- 表格区域开始 -->
    <TheTable
      :columns="columns"
      :layout="false"
      ref="tableRef"
      :data="allList"
      :page.sync="page"
      :showPage="false"
      @getDataBySelectBox="selectChange"
    >
    <el-table-column type="selection" width="55" />
     <el-table-column
        label="入库批次"
        prop="inId"
        v-if="columns[0].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="屠宰场id"
        prop="slaId"
        v-if="columns[1].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="屠宰批次"
        prop="shBatch"
        v-if="columns[2].show"
        show-overflow-tooltip
      />
      <el-table-column
        label="经手人"
        prop="hander"
        v-if="columns[3].show"
        show-overflow-tooltip
      />
      <el-table-column
       label="数量"
        prop="count"
        v-if="columns[4].show"
        show-overflow-tooltip
      />
      <el-table-column
       label="入库时间"
        prop="date"
        v-if="columns[5].show"
        show-overflow-tooltip
      />

      <el-table-column fixed="right" label="操作" width="150rem">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: #32CD32"
            icon="el-icon-share"
            @click="seeDetail(scope.row.inId)"
            >详情</el-button
          >
           <el-button type="text"
           style="color: #FA6962"
           icon="el-icon-delete"
            @click="tableDelete(scope.row.inId)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </TheTable>
    <!-- 表格区域结束 -->
    <InForm
      :addInfo="addInfo"
      :title="title"
      :dialogVisible="dialogVisible"
      @closeAddDialog="closeAddDialog"
      @closeAddDialogB="closeAddDialogB"
      v-show="dialogVisible"
      @DisplayData="DisplayData"
    />

    <!-- 查看详情表单开始 -->
     <el-dialog
      title="订单详情"
      :visible.sync="detailDialog"
      width="47rem"
      :before-close="tableClose"
    >
     <el-table
    :data="detailInfo.detailArray"
    border
    style="width: 100%">
    <el-table-column
    align="center"
      prop="type"
      label="规格"
      width="140rem">
    </el-table-column>
    <el-table-column
    align="center"
      prop="count"
      label="数量"
      width="140rem">
    </el-table-column>
    <el-table-column
    align="center"
      prop="unit"
      label="单位"
      width="140rem">
    </el-table-column>
    <el-table-column
    align="center"
      prop="remark"
      label="备注"
      width="140rem">
    </el-table-column>
    </el-table>
    </el-dialog>
      <!-- 查看详情表单结束-->
 <!-- 页码条区域开始 -->
    <div class="page-css">
      <el-pagination
        :page-sizes="[2, 5, 10, 15]"
        :page-size="page.pageSize"
        :current-page="page.pageNum"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
        v-if="true"
      >
      </el-pagination>
    </div>
    <!-- 页码条区域结束 -->
  </div>
</template>

<script>
import InForm from "@/components/Slaughter/StoreManage/InForm";
import {
  getAllInfoByPage,
  deleteOrder,
  getInfoByBatch,
  showDetails,
} from "@/api/Slaughter/ColdStorageIn.js";
export default {
  name: "ColdStorageIn",
  meta: {
    title: "冷库入库管理",
  },
  components: {
   InForm
  },
  data() {
    return {
      page: {
        current: 1,
        pageSize: 10,
        pageNum: 1,
        total: 4,
      },
      //根据批次号获取数据
      batchValue: "",
      // 主体表格数据
      allList: [],
       columns: [
        { name: "入库批次", show: false, prop: "inId" },
        { name: "屠宰场id", show: false, prop: "slaId" },
        { name: "屠宰批次", show: true, prop: "shBatch"},
        { name: "经手人", show: true, prop: "hander"},
        { name: "数量", show: true, prop: "count" },
        { name: "入库时间", show: true, prop: "date" },
        { name: "创建时间", show: true, prop:"gmtCreate"},
        { name: "修改时间", show: true, prop: "gmtModified" },
      ],
      //表名
      title: "",
      //是否新增打开表单
      dialogVisible: false,
       addInfo: {
        AddIn: {
          shBatch: "",   //屠宰批次
          slaId: "",      //所属屠宰场id
          date:"",
          handler:"",
        },
        AddInI: [
          {
           count:"",
           type:"",
           unit:"",
           remark:"",
          },
        ],
      },
       detailInfo:{
        detailArray:[]
      },
      detailDialog:false,
       // 选择要被删除的数据数组
      choosedArray: [],
    };
  },
   created() {
      this.setAllList();
   },
  methods: {
       // 批量删除功能
      async deleteBox() {
      const confirmResult = await this.$confirm(
        "此操作将删除所选记录, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      if (confirmResult === "confirm") {
        this.choosedArray.forEach(async (e) => {
          await deleteOrder(e.id).then((res) => {
            if (res.data.statusCode === 20000) {
              // 刷新列表
              console.log(e.id)
              this.setAllList();
            } else {
              return this.$message.error(res.data.message);
            }
          });
          this.$message.success("删除成功！");
        });
      }
    },
    selectChange(selection) {
      this.choosedArray = selection;
    },

     //根据id查看订单详情
      async seeDetail(id) {
         console.log(id);
         const current = this.page.current;
         const pageSize = this.page.pageSize;

        const { data: res } = await showDetails(id,current,pageSize);
        console.log("详细信息：", res);
       if (res.statusCode === 20000){
          // this.$message.success("查询详情成功");
          this.detailDialog = true;
          // 查看订单详细
          this.detailInfo.detailArray = res.data.records;
       }else{
          if(res.statusCode !== 20000){
            return  this.$message.error("查询数据失败");
           }
       }
    },

    //打开新增表单
    addEven() {
      this.dialogVisible = true;
      this.title = "新增订单";
      this.addInfo ={
        AddIn: {
          shBatch: "",   //屠宰批次
          slaId: "",      //所属屠宰场id
          date:"",
          handler:"",
        },
        AddInI: [
          {
           count:"",
           type:"",
          },
        ],
      },
      this.addInfo.AddIn.slaId = this.$store.state.Usersetting.SlaughterInfo.guige;
    },

      // 获取数据
      async setAllList() {
      const { data: res } = await getAllInfoByPage(
        this.page.pageNum,
        this.page.pageSize,
      );
      console.log("路由id",this.$store.state)
      console.log("请求到的列表", res);
      if (res.statusCode !== 20000) {
          this.$message.error("查询失败");
        } else {
        this.allList = res.data.records;
        this.page.total = res.data.total;
        }
      },
    // 根据id删除订单
    async tableDelete(id) {
      console.log(id)
      const confirmResult = await this.$confirm(
        "此操作将永久删除该订单, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await deleteOrder(id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该订单");
        this.setAllList();
      } else {
        this.$message.error("删除该订单失败");
      }
    },
      //根据批次号查询数据
    async getDataByBatch(shBatch) {
      console.log("批次号", shBatch);
      if (!shBatch) {
        this.setAllList();
      } else {
        const { data: res } = await getInfoByBatch(
          shBatch
        );
        console.log("请求到的列表", res);
        if (res.statusCode !== 20000) {
          this.$message.error("暂无该批次号数据");
        } else {
          this.allList = res.data;
          this.page.total = res.data.total;
          // this.$message.success("查询成功")
        }
      }
    },
    changeColumn(columns) {
        this.columns = columns
        this.$refs.table.doLayout()
      },

      handleCurrentChange(newSize){
      console.log(newSize)
      this.page.pageNum = newSize;
      // 重新获取数据
      this.setAllList()

    },
    handleSizeChange(newPage){
      console.log(newPage)
      this.page.pageSize = newPage
      this.setAllList()
    },
    //关闭新增表单
    closeAddDialog(a) {
      //是否新增打开表单
      this.dialogVisible = a;
      this.addInfo = {};
      this.setAllList();
    },
     closeAddDialogB(a){
      //是否新增打开表单
      this.dialogVisible = a;
      this.addInfo = {};
    },
    DisplayData() {
      this.setAllList();
    },
    // 关闭弹窗
      tableClose() {
       this.detailDialog = false;
      },

    },


};
</script>
<style lang="scss" scoped>
.page-css{
   margin-top: 1rem;
  text-align: center;
}
</style>
